<template>
  <!-- 颜色选择面板组件 -->
  <ul class="music-swatches">
    <li
      @click="SWITCHCOLOR(index)"
      v-for="(bgColor, index) in themes['colors']"
      :key="`${bgColor}-${index}`"
      class="color-item"
      :class="index === themes['idx'] ? 'active' : ''"
      :style="`background: ${bgColor}`"
    >
      <img
        v-show="index === 0"
        class="default-angle"
        src="../../assets/svg/default.svg"
        alt=""
      />
    </li>
    <li class="color-item">
      <el-color-picker v-model="color" show-alpha></el-color-picker>
    </li>
  </ul>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "MusicSwatches",
  computed: {
    /* 氛围灯数据 */
    ...mapState("music", ["themes"]),
  },
  data() {
    return {
      color: "",
    };
  },
  watch: {
    /* 监听颜色值 */
    color: {
      handler(value) {
        /* 添加当前颜色 */
        this.PUSHUSERCUSTOMTHEME(value);
      },
    },
  },
  methods: {
    /* 选择颜色、添加当前颜色的方法 */
    ...mapMutations("music", ["SWITCHCOLOR", "PUSHUSERCUSTOMTHEME"]),
  },
};
</script>

<style lang="less" scoped>
.music-swatches {
  padding: 0 0.3rem;
  display: flex;
  flex-wrap: wrap;
  .color-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1rem;
    width: 1rem;
    border-radius: 0.1rem;
    cursor: pointer;
    overflow: hidden;
    margin-bottom: 0.2rem;
    box-sizing: border-box;
    position: relative;
    margin-right: 0.3rem;
    .default-angle {
      position: absolute;
      top: 0;
      right: 0;
      height: 0.6rem;
      width: 0.6rem;
    }
    &.active {
      outline: solid #ffffff;
    }
  }
}
</style>